<template>
	<view class="uni-tabbar">
		<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
			<view class="uni-tabbar__bd">
				<view class="uni-tabbar__icon">
					<i class="t-icon" :class="item.selectedIconPath" v-if="item.pagePath == pagePath"></i>
					<i class="t-icon" :class="item.iconPath" v-else></i>
				</view>
			</view>
			<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
		//从父级继承过来的属性 需要在父级中使用:pagePath='pagePath',
			pagePath: String
		},
		data() {
			return {
				// page: '',
				showPage: false,
				containerHeight: 400,
				//公共的tabbar
				tabbar: [{
						"pagePath": "pages/index/index",
						"text": "首页",
						"iconPath": "t-icon-shouye-weixuanzhong-01",
						"selectedIconPath": "t-icon-shouye-xuanzhong-01"
					},
					{
						"pagePath": "pages/mine/index",
						"text": "我的",
						"iconPath": "t-icon-wode-weixuanzhong-01",
						"selectedIconPath": "t-icon-wode-xuanzhong-01"
					},
				]
			};
		},
		watch: {
			pagePath: {
				handler(pagePath) {
				},
				immediate: true
			}
		},
		methods: {
			changeTab(item) {
				this.page = item.pagePath;
				// 使用reLaunch关闭所有的页面，打开新的栏目页面
				// console.log(item.pagePath)
				// console.log(this.page)
				uni.reLaunch({
					url: '/' + this.page,
				})
			},
		}
	}
</script>

<style lang="scss">
	.uni-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 110rpx;
		padding: 14rpx 0;
		box-sizing: border-box;
		border-top: solid 1rpx #f5f5f5;
		background-color: #fff;

		.uni-tabbar__item {
			display: block;
			line-height: 24rpx;
			font-size: 20rpx;
			text-align: center;
			width: 25%;
		}

		.uni-tabbar__icon {
			height: 24px;
			line-height: 24px;
			text-align: center;
			image{
				pointer-events: none;
			}
		}
		.uni-tabbar__icon .t-icon {
			font-size: 44upx;
			text-align: center;
			height: 22px;
			width: 22px;
		}

		.icon {
			display: inline-block;
		}

		.uni-tabbar__label {
			line-height: 24rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #777;
			margin-top: 6rpx;

			&.active {
				color: #0f4fe8;
			}
		}

		.icon-img {
			height: 22px;
			width: 22px;
		}
	}
</style>